<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions" >

    <script type="text/javascript">

        function serverTime() {
            var horaServer = new Date(${poolAplicacionBean.stringFechaServer});
            return horaServer;
        }
    </script>  
        
    <h:panelGroup layout="block" id="estadoPool"  styleClass="poolInfo"
                  rendered="#{not empty poolSessionBean.pool}">
    

            <div class="poolContador">
                
                <script type="text/javascript">
                    $(function () {
                        var fechaFin = new Date(#{aplicacionBean.fechaFin(poolSessionBean.pool)} );
                        $('#defaultCountdown#{poolSessionBean.pool.nroPool}').countdown({until: fechaFin, serverSync: serverTime()});
                    });
                </script>

                <div class="poolFinaliza" > Tiempo disponible </div>
                <div id="defaultCountdown#{poolSessionBean.pool.nroPool}" ></div>
                
            </div>  
                 
        <h:panelGroup layout="block" styleClass="poolCantidades" style="margin-left: 25px;"
                      rendered="#{poolSessionBean.pool.tipo.tipoFinalizacion eq 'C'}" >

            <h:outputText value="¡Cantidades ilimitadas!" />

        </h:panelGroup>

        <!-- Cantidades disponibles -->
        <h:panelGroup layout="block" styleClass="poolCantidades" style="margin-left: 25px;"
                      rendered="#{poolSessionBean.pool.tipo.tipoFinalizacion ne 'C'}">
            
            <div class="cantDisponible">
           <h:outputText  value="#{poolSessionBean.pool.cantidadDisponible}"
                          style="margin: 10px;" >
               <f:convertNumber pattern="0"/>
           </h:outputText>

           <h:outputText value="#{poolSessionBean.pool.unidadMedida} disponibles" />

           <p:effect type="pulsate" event="load" delay="1">
                <f:param name="mode" value="'show'" />
           </p:effect>
           
            </div>

           <h:panelGroup layout="block" styleClass="poolBarraPorcentaje" style="">

               <p:progressBar id="porcentajeVenta" styleClass="porcentajeVenta"
                      value="#{poolSessionBean.porcentajeFinalizadoPool(poolSessionBean.pool)}" labelTemplate="{value}% Vendido"
                      displayOnly="true" >

                   <p:effect type="shake" event="load" delay="1">
                        <f:param name="mode" value="'show'" />
                   </p:effect>

               </p:progressBar>

           </h:panelGroup>

        </h:panelGroup>
        
        <div class="poolInfoReserva" >

            <div class="poolInfoReservaImagen">
                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/pool/pool-gente.png"
                                height="50" />
            </div>
            
        </div>

        <h:panelGroup layout="block" styleClass="poolAgotado" rendered="#{not poolSessionBean.pool.activa}"
                                  style="z-index: 999;">


            <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/pool/agotado.png"
                            height="45" style="z-index: 999;" />

        </h:panelGroup>

        <div class="poolBasesCondiciones">           

            <div class="poolBasesCondicionesImagen">
                <p:graphicImage id="img" value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/33_info.png" style="cursor: pointer;" />
            </div>

            <div class="poolBasesCondicionesTexto">
                <h:outputText value="Términos y Condiciones"/>
            </div>           

            <p:overlayPanel id="bcPanel" for="img" hideEffect="fade" dynamic="true"
                            showCloseIcon="true" style="text-align: left; width: 700px;">

                <h:outputText value="Términos y Condiciones" style="font-weight: bold; font-size: 12px;" />
                <hr/>
                <p:spacer height="15" style="width: 100%" />

                <ui:repeat value="#{poolSessionBean.pool.tipo.basesCondiciones}" var="s" >

                    <div class="itemBasesCondiciones">

                        <h:outputText value="#{s.descripcion}" />

                    </div>

                </ui:repeat>

                <ui:repeat value="#{poolSessionBean.pool.baseCondicionesAdicionales}" var="s" >

                    <div class="itemBasesCondiciones">

                        <h:outputText value="#{s.descripcion}" />

                    </div>
                </ui:repeat>

                <p:spacer height="15" style="width: 100%" />

            </p:overlayPanel>

        </div>
  
    
    </h:panelGroup>

    <h:panelGroup layout="block" styleClass="poolNoEncontrado" 
                  rendered="#{empty poolSessionBean.pool}">

        <p:messages showDetail="true" />

    </h:panelGroup>
    
</ui:composition>
